<!-- 一期所有样式和js都写入到html中 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <title>逗学教育</title>
    <link rel="stylesheet" href="../../common/css/vant.css" />
    <link rel="stylesheet" href="../../common/css/common.css" />
    <style>
      /*
			页面的所有css，必须有页面前缀
			如首页，则所有css以 .index- 开头
         */
      /* header样式 */
      .activation-right {
        width: 0.7rem;
      }

      /* 输入框样式 */
      .van-cell-group {
        background-color: rgba(247, 248, 250, 1);
      }
      .van-cell {
        padding: 0;
        background-color: rgba(247, 248, 250, 1);
      }

      .van-field__body {
        width: 6rem;
        margin: 30vh auto 0.79rem;
      }

      .van-field__control {
        height: 0.88rem;
        width: 6rem;
        border: 0.02rem solid rgba(153, 153, 153, 1);
        border-radius: 0.1rem;
        padding: 0 0.37rem;
        font-size: 0.26rem;
      }

      /* 按钮样式 */
      .activation-btn {
        width: 6rem;
        margin: 0 auto;
      }

      .van-button--danger {
        width: 6rem;
        height: 0.88rem;
        color: #fff;
        font-size: 0.32rem;
        line-height: 0.7rem;
        border-radius: 0.1rem;
        background: rgba(222, 42, 32, 1);
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <!-- ************************ 头 *************************** -->
      <div class="page-top">
        <div class="page-top">
          <div class="flex-wrap flex-justify-between flex-center-wrap header">
            <div class="header-row" @click="goBack">
              <img
                class="header-row-img"
                src="../../common/image/back.png"
                alt=""
              />
            </div>
            <div class="flex header-title">课程激活</div>
            <div class="header-right"></div>
          </div>
        </div>
      </div>
      <!-- ************************* 内容 *********************** -->
      <div class="page-content comment-container">
        <div class="placeholder"></div>
        <van-cell-group>
          <van-field
            v-model="activeCode"
            placeholder="请输入课程激活码"
          ></van-field>
        </van-cell-group>
        <div class="activation-btn">
          <van-button type="danger" @click="active" :disabled="disabled"
            >激活</van-button
          >
        </div>
      </div>
      <!-- *************** 脚部*********** -->
      <div class="page-bottom"></div>
    </div>

    <script src="../../common/js/common.js"></script>
    <script src="../../common/js/vue.min.js"></script>
    <script src="../../common/js/vant.min.js"></script>
    <script src="../../common/js/http.js"></script>
    <script src="../../widget/service/user.service.js"></script>
    <script>
      // 注册 Lazyload 组件
      Vue.use(vant.Lazyload)
      // 注册 Image 组件
      Vue.use(vant.Button)
      // 注册 Field 组件
      Vue.use(vant.Field)
      // 注册 dialog 组件
      Vue.use(vant.Dialog)
      Vue.use(vant.Toast)

      new Vue({
        el: '#app',
        components: {},
        data: {
          //  激活码
          activeCode: '',
          disabled: false
        },
        computed: {},
        methods: {
          // 返回按钮事件
          goBack() {
            window.history.back(-1)
          },
          // 激活按钮事件
          active() {
            this.disabled = true
            userService
              .getActivationCourseInfo({ code: this.activeCode })
              .then(res => {
                if (!res.code) {
                  let course = ''
                  for (let key of res) {
                    course += '、'
                    course += key.title
                  }
                  course = course.slice(1)
                  this.$dialog
                    .confirm({
                      message: `是否激活${course}课程?`
                    })
                    .then(() => {
                      // on confirm
                      userService
                        .activationCourse({ code: this.activeCode })
                        .then(res2 => {
                          this.disabled = false
                          // TODO: 激活课程成功 进行跳转
                          if (res2.code) {
                            this.$toast(res2.message)
                          } else {
                            this.activeCode = ''
                            this.$dialog
                              .confirm({
                                title: '激活成功',
                                message: '是否进入订单查看?'
                              })
                              .then(() => {
                                // on confirm
                                location.href = './order.html'
                              })
                              .catch(() => {
                                // on cancel
                                this.disabled = false
                              })
                          }
                        })
                    })
                    .catch(() => {
                      // on cancel
                      this.disabled = false
                    })
                } else {
                  this.$toast('激活码错误')
                  this.disabled = false
                }
              })
          }
        },
        created() {}
      })
    </script>
  </body>
</html>
